<template>
  <div class="app-container">
    <el-row ref="headerRow"><slot /></el-row>
    <div class="top">
      <el-button size="small" @click="search">刷新</el-button>
      <el-button
        type="danger"
        :disabled="tableSelect.length == 0"
        @click="deletes()"
        >删除</el-button
      >
    </div>
    <div class="search">
      <el-input
        v-model="searchData.pricname"
        placeholder="请输入价格牌名称"
        clearable
        class="etag"
        size="mini"
      />
      <el-input
        v-model="searchData.imei"
        placeholder="请输入IMEI"
        clearable
        class="etag"
        size="mini"
      />
      <el-select
        v-model="searchData.handletype"
        class="etag"
        size="mini"
        clearable
        placeholder="请选择故障类型"
      >
        <el-option label="信号值低" value="1" />
        <el-option label="离线" value="2" />
        <el-option label="电量低" value="3" />
      </el-select>
      <el-select
        v-model="searchData.handlestatus"
        class="etag"
        size="mini"
        clearable
        placeholder="请选择处理状态"
      >
        <el-option label="已处理" value="1" />
        <el-option label="未处理" value="0" />
      </el-select>
      <el-button type="primary" size="mini" class="ml5" @click="search"
        >查询</el-button
      >
    </div>
    <div class="table">
      <el-table
        ref="theTable"
        element-loading-text="加载中"
        fit
        stripe
        empty-text="暂无数据"
        :height="windowHeight - 175 - headerHeight + 'px'"
        :data="tableData.records"
        border
        highlight-current-row
        @sort-change="onSort"
        @current-change="handleTableCurrentChange"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="onlineLabel" label="序号">
          <template slot-scope="scope">
            {{
              scope.$index + (searchData.curPage - 1) * searchData.pageSize + 1
            }}</template
          >
        </el-table-column>
        <el-table-column prop="onlineLabel" label="上报时间">
          <template slot-scope="scope">
            {{ scope.row.createtime | formatDateHM }}
          </template>
        </el-table-column>
        <el-table-column prop="onlineLabel" label="更新时间">
          <template slot-scope="scope">
            {{ scope.row.updatetime | formatDateHM }}
          </template>
        </el-table-column>
        <el-table-column prop="onlineLabel" label="价格牌名称">
          <template slot-scope="scope"> {{ scope.row.pricname }}</template>
        </el-table-column>
        <el-table-column prop="onlineLabel" label="场站名称">
          <template slot-scope="scope"
            ><el-link type="primary" @click="go(scope.row)">
              {{ scope.row.stationname }}</el-link
            ></template
          >
        </el-table-column>
        <el-table-column prop="onlineLabel" label="状态">
          <template slot-scope="scope">
            <span v-show="scope.row.status == 0">正常</span>
            <span v-show="scope.row.status == 1">未知错误</span>
            <span v-show="scope.row.status == 3">驱动器异常</span>
          </template>
        </el-table-column>
        <el-table-column prop="onlineLabel" label="在线状态">
          <template slot-scope="scope">
            <span v-show="scope.row.online == 0">否</span>
            <span v-show="scope.row.online == 1">是</span>
          </template>
        </el-table-column>
        <el-table-column prop="onlineLabel" label="处理状态">
          <template slot-scope="scope">
            <span v-show="scope.row.handlestatus == 0">未处理</span>
            <span v-show="scope.row.handlestatus == 1">已处理</span>
          </template>
        </el-table-column>
        <el-table-column prop="onlineLabel" label="IMEI">
          <template slot-scope="scope">{{ scope.row.imei }} </template>
        </el-table-column>
        <el-table-column prop="onlineLabel" label="信号值">
          <template slot-scope="scope"> {{ scope.row.rssi }}</template>
        </el-table-column>
        <el-table-column prop="onlineLabel" label="电压">
          <template slot-scope="scope"> {{ scope.row.bat }}</template>
        </el-table-column>
        <!-- <el-table-column prop="onlineLabel" label="处理状态">
          <template slot-scope="scope">
            <span v-show="scope.row.handlestatus == 1">处理完成</span>
            <span v-show="scope.row.handlestatus == 0">未处理</span>
          </template>
        </el-table-column> -->
        <el-table-column prop="onlineLabel" label="故障类型">
          <template slot-scope="scope">
            <span v-show="scope.row.handletype == 1">信号值低</span>
            <span v-show="scope.row.handletype == 2">离线</span>
            <span v-show="scope.row.handletype == 3">电量低</span>
          </template>
        </el-table-column>
        <el-table-column prop="onlineLabel" label="处理">
          <template slot-scope="scope">
            <el-link
              v-if="scope.row.handlestatus == 0"
              type="primary"
              @click="dealWith(scope.row, 0)"
              >处理</el-link
            >
            <el-link v-else type="primary" @click="dealWith(scope.row, 1)"
              >查看</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-row>
      <el-col :span="8">
        <el-pagination
          :current-page.sync="searchData.curPage"
          :page-sizes="[20, 50, 100, 200]"
          :page-size="searchData.pageSize"
          layout="sizes, prev, pager, next"
          :total="tableData.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-col>
    </el-row>
    <el-dialog title="收货地址" :visible.sync="dialogTableVisible">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="处理人">
          <el-input v-model="form.handleman" :disabled="type == 1" />
        </el-form-item>
        <el-form-item label="处理原因">
          <el-input
            v-model="form.handlereason"
            type="textarea"
            :disabled="type == 1"
          />
        </el-form-item>
        <el-form-item>
          <el-button v-show="type == 0" type="primary" @click="onSubmit"
            >提交</el-button
          >
          <el-button @click="cancel">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {
  getWorkOrderList,
  getWorkOrderHandle,
  delworkOrder,
} from "@/api/WorkOrder";
import { batchDel, mergeQuerrys } from "@/utils";
export default {
  data() {
    return {
      cache: {},
      form: {
        handleman: "",
        handlereason: "",
      },
      dialogTableVisible: false,
      searchData: {
        column: "",
        curPage: 1,
        pageSize: 20,
        order: "",
      },
      windowHeight: window.innerHeight,
      headerHeight: 0,
      a: 1,
      tableData: {
        total: 0,
      },
      type: 0,
      tableSelect: [],
    };
  },
  mounted() {
    this.search();
    this.$nextTick(() => {
      window.addEventListener("resize", this.onResize);
      this.headerHeight = this.$refs.headerRow.$el.offsetHeight;
      // console.log('headerHeight', this.$refs, this.$refs.headerRow, this.headerHeight)
    });
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.onResize);
  },
  methods: {
    go(e) {
      this.$router.push({ path: `/station/detail/${e.stationId}` });
    },
    onSubmit() {
      getWorkOrderHandle(this.form).then((ret) => {
        console.log(ret);
        this.dialogTableVisible = false;
        this.search();
      });
    },
    cancel() {
      this.dialogTableVisible = false;
    },
    dealWith(e, types) {
      this.type = types;
      this.cache = e;
      this.form.id = this.cache.id;
      this.form.handleman = this.cache.handleman;
      this.form.handlereason = this.cache.handlereason;
      console.log(e);
      this.dialogTableVisible = true;
    },
    handleCurrentChange() {
      this.search();
    },
    handleSizeChange(e) {
      console.log(e);
      this.searchData.pageSize = e;
      console.log();
      this.search();
    },
    search() {
      const keyDefs = [
        { key: "pricname", matchType: "like" },
        { key: "imei", matchType: "like" },
        { key: "handletype", matchType: "match" },
        { key: "handlestatus", matchType: "match" },
      ];
      getWorkOrderList(mergeQuerrys(keyDefs, this.searchData)).then((ret) => {
        console.log("ret", ret);
        this.tableData = ret.data;
      });
    },
    onResize() {
      this.windowHeight = window.innerHeight;
    },
    onSort({ column, prop, order }) {},
    // 当前选中项改变
    handleTableCurrentChange(val) {
      console.log(val);
    },
    // 当前选中项改变（多选）
    handleSelectionChange(val) {
      console.log(val);
      this.tableSelect = val;
    },
    deletes() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          let arr = [];
          this.tableSelect.forEach((item, index) => {
            arr.push(item.id);
          });
          let obj = {
            ids: arr,
          };
          delworkOrder(obj).then((ret) => {
            this.search()
            this.$message({
              type: "success",
              message: "删除成功!",
            });
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
  },
};
</script>
<style>
.etag {
  width: 170px;
  margin-right: 5px;
}

.search {
  margin-top: 8px;
}

.table {
  margin-top: 5px;
}
</style>
